<template>
  <div class="chart-box">
    <div class="line-echarts-box" v-if="seriesData.length > 0">
      <v-echarts ref="vechart"></v-echarts>
    </div>
    <VNoData v-else style="margin-top: 15%; margin-bottom: 10%"></VNoData>
  </div>
</template>

<script>
  import api from '../../../../../api/url'
  import ajax from '../../../../../api/ajax/ajax'
  import VNoData from '../../../../../components/VNoData/VNoData'
  import { VEcharts } from '../../../../../components'

  export default {
    name: 'lineEcharts',
    props: {
      kanbanId: {
        type: String
      }
    },
    components: {
      VEcharts,
      VNoData
    },
    data () {
      return {
        seriesData: []
      }
    },
    methods: {},
    created () {
      ajax.post(api.SELECT_ANALYSE_ANAL, {kanban_elem_id: this.kanbanId}).then(res => {
        if (res.data.charts.xaxis_list.length > 0) {
          this.seriesData = res.data.charts.xaxis_list
          this.$nextTick(() => {
            this.$refs.vechart.getData(res.data.charts)
          })
        } else {
          this.seriesData = []
        }
      })
    }
  }
</script>
<style lang="stylus">
  .chart-box
    .v-echarts
      margin-top 10px
      width 100%
      .echarts
        width 100%
      .echarts > div > canvas
        width 100% !important
    #vnodata
      margin 5% 0
</style>
